<template>
  <div class="login-content">
    <div class="login-box">
      <el-form
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
        class="form_style"
      >
        <!-- 用户 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            type="password"
            show-password
            v-model="loginForm.password"
          ></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="verify">
          <el-input
            placeholder="请输入验证码"
            v-model="verifyInput"
            class="verify-input"
          ></el-input>
          <el-button type="success" class="verify-btn" @click="verifyChange">{{
            verify
          }}</el-button>
        </el-form-item>

        <!-- 按钮 -->
        <el-form-item>
          <el-button type="success" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
          <el-button type="warning" @click="register">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
var hash = require("object-hash");
export default {
  data() {
    // const validateUsername=(rule,value,callback)=>{
    //   if(value.length<=0){
    //     return callback(new Error('请输入内容'))
    //   }
    //   else {
    //     if(this.loginForm.username.search('\'')!==0){
    //     callback(new Error('输入中有\',不符合')
    //   }
    //   }
    // }
    return {
      // 登录表单的数据绑定
      loginForm: {
        username: "小明",
        password: "123456",
      },
      // 验证码
      verifyInput: "",
      verify: "",
      // 表单的验证规则
      loginFormRules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },

          // {
          //   validator: validateUsername,
          //   required: true,
          //   message: "请输入用户名称",
          //   trigger: "blur",
          // },
        ],

        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        // 验证码
        // verify: [
        //   { required: true, message: "请输入验证码", trigger: "blur" },
        //   {
        //     min: 4,
        //     max: 4,
        //     message: "长度在 4个字符",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  created() {
    this.rand(1000, 9999);
  },
  // components: { yanZhen },
  methods: {
    // 重置表格数据
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    // 登录
    login() {
      this.$refs.loginFormRef.validate(async (vai) => {
        if (!vai) return;
        // console.log(typeof this.verifyInput);

        if (this.verifyInput !== this.verify) {
          return this.$message.error("验证码错误");
        }
        this.loginForm.password = hash(this.loginForm.password, {
          algorithm: "md5",
          encoding: "base64",
        });

        const { data: res } = await this.axios.post("/login", this.loginForm);
        console.log(res);
        if (res.code !== 200) return this.$message.error(res.msg);
        else {
          window.sessionStorage.setItem("token", res.token);
          window.sessionStorage.setItem("name", res.name);
          this.$message.success("登录成功");
          console.log("id" + res.data[0]);
          window.localStorage.setItem("limits", res.data[0].limits);
          window.localStorage.setItem("id", res.data[0].id);

          // this.$router.push("/home/" + res.data[0].id);
          // this.$router.push({
          //   path: "/home",
          //   query: {
          //     id: res.data[0].id,
          //   },
          // });

          this.$router.push("/home");
        }
      });
    },
    register() {
      this.$router.push("/register");
    },
    // 验证码生成
    rand(min, max) {
      const a = Math.floor(Math.random() * (max - min)) + min;
      this.verify = a + "";
      return this.verify;
    },
    verifyChange() {
      setTimeout(() => {
        this.rand(1000, 9999);
      }, 1000);
    },
  },

  // 从数据表获得上一个数据的ID
};
</script>

<style scoped>
.login-content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #5d6371;
}
.login-box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 450px;
  height: 300px;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
.form_style {
  padding: 30px 10px 0px 10px;
}
.verify-input {
  width: 75%;
}
</style>